<template>
  <div>
    <el-form :inline="true" ref="queryForm" :model="query">
      <el-row type="flex" class="row-bg" justify="space-between">
        <!-- 检索表单 -->
        <el-col :span="18">
          <el-form-item label="名称" prop="name">
            <el-input v-model="query.name" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" @click="querySearchForm"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" @click="resetSearchForm"
              >重置</el-button
            >
          </el-form-item>
        </el-col>

        <!-- 新增按钮 -->
        <el-col :span="6" class="table-tools">
          <el-button
            @click="openDialog()"
            icon="el-icon-plus"
            v-if="hasPermission(permission.save)"
            >添加{{ dialogTitle  }}</el-button
          >
        </el-col>
      </el-row>
    </el-form>

    <!-- 数据列表 -->
    <el-table
      stripe
      border
      :data="tableData"
      style="width: 100%"
      :height="maxTableHeight"
    >
      <el-table-column prop="name" label="名称" width="180"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>

      <!-- 操作 -->
      <el-table-column
        fixed="right"
        label="操作"
        width="120"
        v-if="hasAnyPermission()"
      >
        <template slot-scope="scope">
          <!-- 编辑 -->
          <el-button
            type="text"
            size="medium"
            icon="el-icon-edit"
            @click="openDialog(scope.row)"
            v-if="hasPermission(permission.update)"
          ></el-button>

          <!-- 删除 -->
          <el-button
            type="text"
            size="medium"
            icon="el-icon-delete"
            @click="deleteRow(scope.row)"
            v-if="hasPermission(permission.delete)"
          ></el-button>

          <!-- 角色权限 -->
          <el-button
            type="text"
            size="medium"
            @click="openPermissionDialog(scope.row)"
            v-if="hasPermission(permission.rolePermission)"
            >权限</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页标签 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 50]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>

    <!-- 更新数据弹框 -->
    <sysRoleUpdate ref="updateDialog" :dialogTitle="dialogTitle"></sysRoleUpdate>

    <!-- 权限配置弹框 -->
    <sysRolePermission ref="rolePermissionDialog"></sysRolePermission>
  </div>
</template>

<script>
import { mapState } from "vuex";

// 子组件
import sysRoleUpdate from "@/views/sys/role/update";
import sysRolePermission from "@/views/sys/role/rolePermission.vue";

// api
import sysApi from "@/api/sysApi";
import listMixins from "@/views/base/listMixins";

export default {
  name: "sysRole",
  // 子组件
  components: {
    sysRoleUpdate,
    sysRolePermission,
  },
  mixins: [listMixins],
  // 数据
  data() {
    return {
      // 弹框标题
      dialogTitle: "角色",
      // 检索条件
      query: {
        name: "",
      },
      permission: {
        save: "sys:role:save",
        update: "sys:role:update",
        delete: "sys:role:delete",
        rolePermission: "sys:role:permission"
      },
    };
  },
  methods: {
    // 请求数据
    remoteTableData() {
      sysApi.sysRole
        .listPage(this.searchParams())
        .then((res) => {
          this.updateTableData(res.data);
        });
    },
    // 打开权限配置页面
    openPermissionDialog(row) {
      this.$refs["rolePermissionDialog"].open(row);
    },
    // 删除 
    deleteRow(row) {
      this.$confirm("确认删除角色 [" + row.name + "] ?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          sysApi.sysRole
            .delete(row.id)
            .then((res) => {
              this.resetSearchForm();
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
  },
  computed: mapState({
    user: (state) => state.user.userInfo,
  }),
};
</script>